<template>
  <div class="bid-order-wrapper">
    <List>
      <ListItem v-for="order in orders" :key="order.id">
        <ListItemMeta>
          <template slot="title">
            <span id="title">{{order.item.title}}</span>
            <span id="order-num">订单号：{{order.order_id}}</span>
          </template>
          <template slot="avatar">
            <img :src="order.item.image_src" style="width: 80px" />
          </template>
          <template slot="description">
            <span v-if="roll == 'buyer'">
              卖家：
              <router-link to="#">{{order.seller.shop_name}}</router-link>
            </span>
            <span v-else>
              赢家：
              <router-link to="#">{{order.buyer.nickname}}</router-link>
            </span>

            <Divider type="vertical" />成交价：
            <span style="color: #c0392b">￥{{order.item.max_price}}</span>
            <Divider type="vertical" />订单状态：
            <span style="color: #27ae60" v-if="order.status">已付款</span>
            <span style="color: #e67e22" v-else>待付款</span>
            <br />
            成交时间：{{order.order_time}}
          </template>
        </ListItemMeta>
        <template slot="action">
          <li>
            <router-link :to="'/order?type=goods&order_id='+order.order_id">查看详情</router-link>
          </li>
          <li>
            <a href="#" style="color: #e74c3c">删除</a>
          </li>
        </template>
      </ListItem>
    </List>
  </div>
</template>

<script>
export default {
  props: {
    orders: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      roll: ""
    };
  },
  mounted() {
    this.roll = this.$route.query.roll;
  }
};
</script>

<style>
</style>